<template>
    <div class="user-main soft-box">
        <div class="avatar">
            <v-avatar color="indigo" class="soft">
                <v-icon dark>
                    mdi-account-circle
                </v-icon>
            </v-avatar>
        </div>
        <div class="control-user">
            <v-list class="list" color="transparent">
                <v-list-item-group
                        v-model="selectedItem"
                        color="primary"
                >
                    <v-list-item
                            v-for="(item, i) in items"
                            :key="i"
                            :to="item.to"
                            color="transparency"
                    >
                        <v-list-item-icon>
                            <v-icon v-text="item.icon"></v-icon>
                        </v-list-item-icon>
                        <v-list-item-content>
                            <v-list-item-title v-text="item.text"></v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
            </v-list>
        </div>
    </div>
</template>

<script>
    export default {
        name: "User",
        data:()=>({
            selectedItem: 0,
            items: [
                { text: '文件管理', icon: 'mdi-folder',to:"/files" },
                { text: '设置', icon: 'mdi-database-settings',to:"/setting" },
            ],
        })
    }
</script>

<style lang="scss">
    .user-main{
        .control-user{
            .list{
                .v-list-item-group .v-list-item--active{

                }
                .theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled){

                }
            }
        }
    }
</style>

<style scoped lang="scss">
    .user-main{
        max-width: 20rem;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 90%;
        min-height: 10rem;
        .avatar{
            display: inline;
        }
        .control-user {
            width: 100%;

            .list {
                width: 100%;
            }
        }
    }
</style>